import React from 'react'
import {
  componentsGroup,
  ComponentConfType
} from '../../components/QuestionComponents'
import { Typography } from 'antd'
import style from './ComponentLib.module.scss'
import { useDispatch } from 'react-redux'
import { addComponent } from '../../store/componentsReducer'
import { nanoid } from 'nanoid'

const { Title } = Typography

export default function ComponentLib() {
  const dispatch = useDispatch()
  // 点击某个组件
  function handleClickComponent(comItem: ComponentConfType) {
    dispatch(
      addComponent({
        _id: nanoid(), // 前端生成一个唯一id
        name: comItem.type + '_' + nanoid(8),
        title: comItem.title,
        type: comItem.type,
        props: comItem.defaultProps
      })
    )
  }
  // 渲染分组下的组件
  function genComponent(comItem: ComponentConfType) {
    const { Component } = comItem
    return (
      // type是组件的唯一标识
      <div
        key={comItem.type}
        className={style.wrapper}
        onClick={() => handleClickComponent(comItem)}
      >
        <div className={style.component}>
          <Component />
        </div>
      </div>
    )
  }

  return (
    <div>
      {componentsGroup.map((gropu, index) => {
        return (
          <div key={index}>
            {/* 显示分组标题 */}
            <Title
              level={5}
              style={{
                margin: '0',
                marginBottom: 10,
                marginTop: index > 0 ? 15 : 0
              }}
            >
              {gropu.groupName}
            </Title>
            {/* 显示组件列表 */}
            {gropu.components.map(component => genComponent(component))}
          </div>
        )
      })}
    </div>
  )
}
